<template>
  <div>
    <router-view></router-view>
    <div class="loginContent">
      <div class="text-center logoImg">
        <img src="../../assets/logo.png"/>
        <p>手机号登录</p>
      </div>
      <ul>
        <li>
          <label><i class="icon"></i> </label>
          <input class="no-style" type="text" v-model.trim="user.tel" ref="tel" required
                 pattern="(1[3|4|5|6|7|8|9])\d{9}"/>
        </li>
        <li>
          <label><i class="icon icon_password"></i> </label>
          <input class="no-style" type="text" v-model.trim="user.code" ref="getedCode" required
                 style="width: 72%;margin-right:4%;"/>
          <v-SendCode :tel="user.tel"></v-SendCode>
        </li>
        <li style="border:none">
          <p class="agreement">
            <q-checkbox v-model="checked"></q-checkbox>
            阅读并同意<span @click="$refs.agreement.open();return false">《悦龄会用户注册协议》</span></p>
        </li>
      </ul>
      <button class="custom" ref="login" @click="login()">登陆</button>
      <div class="text-center">
        <p class="footer">< 020-89447565 咨询客服 ></p>
      </div>
    </div>

    <q-drawer right-side ref="agreement">
      <v-agreement></v-agreement>
    </q-drawer>
  </div>
</template>
<script>
  import {ctoast, confirmDialog, AlertDialog, verifyTel, setLocalstorage, getLocalstorage} from '../../common/js/common'
  import SendCode from './sendCode'
  import {HttpRequest} from '../../common/js/httpFun'
  import {linklist} from '../../common/js/mockdata'
  import Agreement from './agreement'
  export default({
    data () {
      return {
        user: {
          'tel': '',
          'code': ''
        },
        'checked': true,
        'timeOut': '获取验证码'
      }
    },
    created () {
    },
    watch: {
      checked: function (val) {
        if (val) {
          this.$refs.login.removeAttribute('disabled')
        }
        else {
          this.$refs.login.setAttribute('disabled', 'true')
        }
      }
    },
    methods: {
      createToast (text) {
        ctoast(text)
      },
      createConfirmDialog (msg, yesFun, noFun) {
        confirmDialog(msg, yesFun, noFun)
      },
      login: function (index, done) {
        let vResult = verifyTel(this.user.tel)
        if (!vResult) {
          return false
        }
        if (this.$refs.getedCode.validity.valueMissing) {
          AlertDialog('错误', '请填写验证码')
          return false
        }
        let result = HttpRequest(linklist.loginUrl, {
          mobile: this.user.tel,
          vcode: this.user.code,
          fr: getLocalstorage('fr')
        }, 2)
        result.then((response) => {
          if (response.status === 200) {
            let body = response.body
            if (body.code === 0) {
              // 保存用户信息
              setLocalstorage('islogin', 'success')
              setLocalstorage('userInfo', JSON.stringify(body.data))
              this.$router.go(-1)
            }
            else {
              AlertDialog('错误', body.msg)
            }
          }
          else {
            AlertDialog('错误', '验证码不正确')
          }
        }, (response) => {
          // ...
        }).catch((response) => {
          // ...
        })
        // this.$store.dispatch('changeLogStatu', this.user)
      },
      closeItemFun () {
      }
    },
    components: {
      'v-SendCode': SendCode,
      'v-agreement': Agreement
    }
  })
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/redifined.styl"
  @import "./index.styl"
  .loginContent
    p.agreement
      setFontsize(12px)
      span
        color yellowColor
    .q-checkbox
      width 15px
      height 15px
      margin-left cal(19) rem
      margin-right cal(15) rem
      & input + div:before, & input + div:after
        width 15px
        height 15px
        border-radius 50%
      & input:checked + div:after
        border-radius 0
        width 7px
        height 13px
        top -1px
        left -1px
        border-right-color #cb934b
        border-bottom-color #cb934b
      & input:checked + div:before
        background #fff
        border-color #cb934b
</style>
